{extend name="public/base" /}

{block name="title"}
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">-->
<script type="text/javascript" src="__STATIC__/global/echarts.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>-->

<title>后台首页</title>{/block}

{block name="pjax_container"}

<style>
.content-header{
    background-color: #fff !important;
    width: 100%;
}

.content{
        width: 100%;
        margin-left: 16px;
        margin-right: 16px;
  background-color: #f0f2f5;
  margin-top: 16px;

}

.cont-title{
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin-top: 0;
}
.cont-title>p{
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    padding-top: 15px;
    
}
.cont-title>p>span{
    color: #1890FF;
    font-weight: bold;
    font-size: 16px;
    margin: 0 3px;
}

.cont-title>p>a{
    display: inline-block;
    margin: 0 3px;
    text-decoration: underline;
}

.cont-title>div{
    display: flex;
    width: 100%;
    height: 100%;
}
.cont-title>div>div{
  height: 100%;
}
.cont-title>div>div>a{
  
    display: inline-block;
    width: 160px;
    height: 60px;
    margin: 20px 80px;

}
.cont-title>div>div>a>i{
    float: left;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 20px;
     margin-right: 15px;
     color: #f58f0a;
     padding: 6px;
     border: 2px solid #f58f0a;
}

.cont-title>div>div:nth-child(2)>a>i{
border:  2px solid #5caad4;
color: #5caad4;
}
.cont-title>div>div:nth-child(3)>a>i{
border:  2px solid #53cfba;
color: #53cfba;
}
.cont-title>div>div:nth-child(4)>a>i{
border:  2px solid #bd93e1;
color: #bd93e1;
}
.cont-title>div>div>a>span{
    display: block;
    font-size: 14px;
     color: rgba(0, 0, 0, 0.65);
}
.cont-title>div>div>a>b{
    font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
}

.cont-nav{
      width: 100%;
    height: 245px;
      background-color: #f0f2f5;
    margin-top: 16px;
   display: flex;
  
}
.cont-nav>div{
    flex: 1;
    height: 100%;
   padding-left: 20px;
}

.cont-nav-left{
    background-color: #fff;
    padding-right: 20px;
    position: relative;
}
.cont-nav-left>h3>a{
font-size: 16px;
   color: rgba(0, 0, 0, 0.65);

}
.cont-nav-right{
    margin-left: 20px;
    background-color: #fff;
}
.cont-nav-right>h3>a{
    font-size: 16px;
     color: rgba(0, 0, 0, 0.65);

}

.cont-nav-right>div>p{
    width: 100%;
    height: 34px;
    line-height: 34px;

}
.cont-nav-right>div>p>span{
    float: right;
    padding-right: 50px;
}
.cont-nav-right>div>p>b{
color: #1890FF;
}

.cont-nav-right>div>p>i{
    font-style: normal;
    margin-right: 10px;
   
    border-radius: 50%;
    border: 2px solid #1890FF;
    font-size: 12px;
    padding:4px;
    color: #1890FF;
}


.cont-bottom{
 
    background-color: #fff;
     width: 100%;
     margin-top: 16px;
}
.tab-content{
    border: none;
      
}

a{
     color: rgba(0, 0, 0, 0.65); 
}
.nav-tabs>.active{
    border: none;
   
    border-bottom: 1px solid #1890FF;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #1890FF;
    cursor: default;
    background-color: #fff;
     border: 1px solid transparent; 
    border-bottom-color: transparent;
}
.tab-content .active{
    transition: all 1s;
}
td{
    height: 60px;
    line-height: 60px;
}

#tab3>div{
    width: 25%;
  
    float: left;
    text-align: center;
    padding: 10px 0 20px 0;
 
}
#tab3>div>p{
    margin-top: 10px;
}
#tab4>div{
 
float: left;
   
}

h4{
    font-size: 14px !important;
}

#clock{
 position: absolute;
 bottom: 50px;
 right: 30px;
 border-radius: 50%;
 box-shadow: 0 0 20px #ccc;
 cursor: Move;
 transition:  box-shadow 0.5s;
}

#clock:hover{
   
 animation:shadowColor 4s infinite;
}

@keyframes shadowColor{

25%{
 box-shadow: 0 0 20px red;
}
50%{
 box-shadow: 0 0 20px yellow;
}
75%{
 box-shadow: 0 0 20px blue;
}
100%{
 box-shadow: 0 0 20px green;
}

}

.content-header>.breadcrumb>li{
    color: #999;
}
.content-header>.breadcrumb>.active{
    color: #666;
}
.content-header{
    height: 51px;
 
}

.nav-tabs li:last-child{
    
    height: 42px;
    width: 210px;
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.nav-tabs li:last-child>span{
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    line-height: 35px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    background-color: #d9d9d9;
}
.nav-tabs li:last-child .xz{
        background-color: #1890FF;
}
.nav-tabs>.glyphicon{
color: #ccc;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 14px;
}
</style>
<section class="content-header">
   
    <ol class="breadcrumb">
        <li>首页</li>
        <li class="active">后台首页</li>
    </ol>
</section>
<section class="content"  onload="opener.location.reload()">
    <div class="row cont-title">
        
         <p class="col-md-12">您有<span>{$wsh_jkCount}</span>条奖扣需要审核 <a href="{:url('integral/my_audit')}">立即处理</a></p>
      <div class="col-xs-12 col-md-12" style="flex-wrap:wrap;">
          <div class="col-xs-6 col-md-2"><a href="{:url('task/index')}">
              <i class="glyphicon glyphicon-book"></i>
              <span>待办任务</span>
              <b>{$taksCount??'0'}</b>
          </a></div>
          <div class="col-xs-6 col-md-2">
              <a href="{:url('task/lobby_notice')}">
                    <i class="glyphicon glyphicon-volume-up"></i>
                    <span>待读公告</span>
                    <b>{$noticeCount??'0'}</b>
              </a>
          </div>
          <div class="col-xs-6 col-md-2">
              <a href="{:url('ticket/index')}">
                <i class="glyphicon glyphicon-credit-card"></i>
                <span>当月奖票</span>
                <b>{$jpCount??'0'}</b>
              </a>
          </div>
          <div class="col-xs-6 col-md-3">
              <a href="{:url('integral/index')}">
                  <i class="glyphicon glyphicon-usd"></i>
                  <span>当月奖扣</span>
                  <b>{$jkCount??'0'}</b>
              </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="{:url('integral/index')}" class="btn btn-success" style="max-width: 118px;height:40px;border: none"> <b class="glyphicon glyphicon-plus" style="color: #fff; padding-top: 5px;margin-right: 2px;"></b>添加奖扣</a>
              <a href="{:url('integral/daily')}" class="btn btn-success" style="max-width: 118px;height:40px;border: none"> <b class="" style="color: #fff; padding-top: 5px;margin-right: 2px;"></b>日常奖扣查询</a>
          </div>
      </div>
    </div>
    <div class="row cont-nav">
    
    <div class="cont-nav-left">
      <h3><a href="#">我的积分</a>  <a href="#" class="glyphicon glyphicon-tasks" style="color: #ccc; float: right;"></a></h3>
    <div id="chart" style="height: 170px; width: 370px; position: absolute;left: 40%;top: 50%;transform: translate(-50%,-50%);"></div>
    </div>
    <div class="cont-nav-right">
   <h3><a href="#">我的排名</a></h3>
   <div style="height: 140px;width: 100%;">
        <p><i>月</i>全公司当月第<b>{$userRank.month.rank}</b>名<span>{$userRank.month.integral}</span></p>
        <p><i>年</i>全公司当年第<b>{$userRank.year.rank}</b>名<span>{$userRank.year.integral}</span></p>
        <p><i>总</i>全公司总累计第<b>{$userRank.total.rank}</b>名<span>{$userRank.total.integral}</span></p>
    </div>
    </div>
    
    </div>
    <!-- 整体tab栏切换 -->
    <div class="row cont-bottom" >
        <ul class="nav nav-tabs" style="position: relative;" id="tabs">
            {if condition="$prize_buckle_data.is_prize_buckle_auth == 1"}
            <li class="active"><a href="#tab1" data-toggle="tab" data-url="{:url('integral/my_audit')}">我的审核</a></li>
            <li><a href="#tab2" data-toggle="tab" data-url="{:url('integral/index')}">积分奖扣</a></li>
            <li><a href="#tab3" data-toggl1e="tab" data-url="{:url('awardtask/index')}">奖扣任务</a></li>
            <li><a href="#tab4" data-toggle="tab" data-url="{:url('awardtask/index')}">奖扣统计</a></li>
            {else:}
            <li class="active"><a href="#tab2" data-toggle="tab" data-url="{:url('integral/index')}">积分奖扣</a></li>
            {/if}
                <a href="{:url('integral/my_audit')}" class="glyphicon glyphicon-forward" id="tabsIcon"></a>
            <li id="dates" style="display: none;">
                <span class="xz" date="d" id="D">日</span>
                <span class="" date="m" id="M">周</span>
                <span class="" date="y" id="Y">月</span>
            </li>
        </ul>    
        <!-- 整体 tab栏内容 -->
        <div class="tab-content" style="position: relative;">
            <!-- 我的审核 -->
            <div id="tab1" class="tab-pane active">
                <table class="table table-hover" >
                    <thead>
                               
                        <tr>
                            <th scope="col">主题</th>
                            <th scope="col">奖扣时间</th>
                            <th scope="col">奖扣人次</th>
                            <th scope="col">奖扣得分</th>
                            <th scope="col">记录人</th>
                            <th scope="col">初审人</th>
                            <th scope="col">终审人</th>
                            <th scope="col">状态</th>
                        </tr>
                    </thead>
                    <tbody>
                    {foreach $userCheck as $v}
                        <tr>
                            <td>{$v.theme}</td>
                            <td>{:date('Y-m-d',$v.prize_buckle_time)}</td>
                            <td>{$v.people_sum|default=0}</td>
                            <td>A {$v.integral_a_add+$v.integral_a_del} / B {$v.integral_b_add+$v.integral_b_del}</td>
                            <td>{$v.rname}</td>
                            <td>{$v.fname}</td>
                            <td>{$v.lname}</td>
                            <td>{$checkAwardStatus[$v.status]}</td>
                        </tr>
                    {/foreach}
                    </tbody>
                
                </table>
            </div>
            <!-- 积分奖扣 -->
            <div id="tab2" class="tab-pane">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">主题</th>
                            <th scope="col">奖扣时间</th>
                            <th scope="col">奖扣人次</th>
                            <th scope="col">奖扣得分</th>
                            <th scope="col">记录人</th>
                            <th scope="col">初审人</th>
                            <th scope="col">终审人</th>
                            <th scope="col">状态</th>
                        </tr>
                    </thead>
                    <tbody>
                    {foreach $userAward as $v}
                        <tr>
                            <td>{$v.theme}</td>
                            <td>{:date('Y-m-d',$v.prize_buckle_time)}</td>
                            <td>{$v.people_sum|default=0}</td>
                            <td>A {$v.integral_a_add+$v.integral_a_del} / B {$v.integral_b_add+$v.integral_b_del}</td>
                            <td>{$v.rname}</td>
                            <td>{$v.fname}</td>
                            <td>{$v.lname}</td>
                            <td>{$checkAwardStatus[$v.status]}</td>
                        </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
            <!-- 奖扣任务 -->
            <div id="tab3" class="tab-pane" >

              <div>
                  <h5>奖分任务（{if condition="$prize_buckle_data.integral_type == 0"}周{else:}月{/if}）</h5>
            <div id="chart2" style="height: 170px; width: 200px; left: 30%;"></div>
            <p>已完成{$prize_buckle_data.integral_reward_com}/{if condition="$prize_buckle_data.integral_type == 0"}周{else:}月{/if}<span style="margin: 0 5px; color: #ccc">目标</span><b style="color: #ccc">{$prize_buckle_data.integral_reward}</b></p>
            </div>
              <div>
                    <h5>扣分任务（{if condition="$prize_buckle_data.integral_type == 0"}周{else:}月{/if}）</h5>
                    <div id="chart3" style="height: 170px; width: 200px; left: 30%;"></div>
                    <p>已完成{$prize_buckle_data.integral_deduct_com}/{if condition="$prize_buckle_data.integral_type == 0"}周{else:}月{/if}<span style="margin: 0 5px; color: #ccc">目标</span><b style="color: #ccc">{$prize_buckle_data.integral_deduct}</b></p>
              </div>
            <div>
                    <h5>人次任务（{if condition="$prize_buckle_data.man_type == 1"}天{elseif condition="$prize_buckle_data.man_type == 2"}周{else:}月{/if}）</h5>
                    <div id="chart4" style="height: 170px; width: 200px;left: 30%;"></div>
                    <p>已完成{$prize_buckle_data.man_num_com}/{if condition="$prize_buckle_data.man_type == 1"}天{elseif condition="$prize_buckle_data.man_type == 2"}周{else:}月{/if}<span style="margin: 0 5px; color: #ccc">目标</span><b style="color: #ccc">{$prize_buckle_data.man_num}</b></p>
              </div>
              <div>

                <h5>比例任务（月）</h5>
                <div id="chart5" style="height: 170px; width: 200px; left: 30%;"></div>
                    <p>已完成{$prize_buckle_data.rate_com}%/月<span style="margin: 0 5px; color: #ccc">目标</span><b style="color: #ccc">{$prize_buckle_data.man_num}%</b></p>
              </div>

            </div>
            <!-- 奖扣统计 -->
            <div id="tab4" class="tab-pane">
                <div class="col-sm-4">
                    <h4><span class="glyphicon glyphicon-bitcoin" style="color: rgb(147, 205, 48); margin-right: 5px;"></span>奖扣分趋势</h4>
                    <div id="chart6" style="height: 200px; width: 500px;"></div>
                </div>
                <div class="col-sm-4">
                    <h4><span class="glyphicon glyphicon-user" style="margin-right: 5px; color: rgb(130, 146, 250);"></span>奖扣人次趋势</h4>
                    <div id="chart7" style="height: 200px; width: 500px;"></div>
                </div>
                <div class="col-sm-4">
                    <h4><span class="glyphicon glyphicon-time" style="margin-right: 5px; color: rgb(255, 184, 18);"></span>奖扣比例趋势</h4>
                    <div id="chart8" style="height: 200px; width: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
<!-- <canvas id="clock" width="380" height="380"></canvas> -->
    
</section>

<script>
    var datasX
    var personSum 
    var scoreAdd
    var scoreDel
    var percent
    // 渲染奖扣统计表
    function render(date) {
       
        var str;//分析是年月日？
        if(date == 'y') {
            str = "年";
        }else if(date == 'm'){
            str = "周";
        }else{
            str = "月";
        }
        $.ajax({
            url: "{:url('rewardTotal')}",
            type: 'post',
            data: {
                date
            },
            success: function(res) {
                if(res.err == 0) {
                    datasX = res.data.num
                    personSum = res.data.people_sum
                    scoreAdd = res.data.integral_b_add
                    scoreDel = res.data.integral_b_del
                    percent = res.data.percent
                    // console.log(scoreAdd);
                    // console.log(datasX);
                    // console.log(personSum);
                    
                    // 奖扣统计 6-8 
                    // 表 1
                    var options6 = {
                        backgroundColor: "#fff",
                        legend: {
                            data: ['奖分', '扣分'],
                            align: 'auto',
                            // bottom: 0,
                            formatter: function(name) {
                                let total = ['奖分', '扣分'];
                                let datasAdd = 0;
                                let datasDel = 0;
                                scoreAdd.forEach(val => {
                                    datasAdd += parseInt(val);
                                })
                                scoreDel.forEach(val => {
                                    datasDel += parseInt(val);
                                })
                                
                                if(name == total[0]) {
                                    return datasAdd + "\n" + "本" + str + "总" + name;
                                }else if(name == total[1]) {
                                    return datasDel + "\n" + "本" + str + "总" + name;
                                }
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                label: {
                                    backgroundColor: '#93cd30'
                                }
                            }
                        },
                        // 设置图表宽度
                        grid:{
                            width: 300,
                        },
                        // x 轴数据
                        xAxis: {
                            data: datasX,
                        },
                        yAxis: {
                            show: false,
                            axisLine: {
                                show: false,
                            }
                        },
                        series: [
                            {
                                name: '奖分',
                                type: 'line',
                                itemStyle: {
                                    normal: {
                                        color: '#1890FF',  //圈圈的颜色
                                        lineStyle: {
                                            color: '#1890FF'  //线的颜色
                                        }
                                    }
                                },
                                data: scoreAdd
                            },
                            {
                                name: '扣分',
                                type: 'line',
                                itemStyle: {
                                    normal: {
                                        color: "red",  //圈圈的颜色
                                        lineStyle: {
                                            color: 'red'  //线的颜色
                                        }
                                    }
                                },
                                data: scoreDel
                            }
                        ]
                    };
                    myChart6.setOption(options6);

                    // 积分统计 表2
                    var options7 = {
                        backgroundColor: "#fff",
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                label: {
                                    backgroundColor: '#93cd30'
                                }
                            }
                        },
                        legend: {
                            data: ['人次'],
                            align: 'left',
                            formatter: function(name) {
                                let totalPerson = ['人次'];
                                let person_sum = 0;
                                personSum.forEach(val => {
                                    person_sum += val
                                })
                                if(name == totalPerson[0]) {
                                    return person_sum + "\n" + "本" + str + "总" + name;
                                }
                            }
                        },
                        // 设置图表宽度
                        grid:{
                            x: 30,
                            width: 300,
                        },
                        // x周数据
                        xAxis: {
                            data: datasX
                        },
                        yAxis: {
                            show: false,
                            axisLine: {
                                show: false,
                            }
                        },
                        series: [
                            {
                                name: '人次',
                                type: 'line',
                                itemStyle: {
                                    normal: {
                                        color: '#1890FF',  //圈圈的颜色
                                        lineStyle: {
                                            color: '#1890FF'  //线的颜色
                                        }
                                    }
                                },
                                data: personSum
                            }
                        ],
                        
                    };
                    myChart7.setOption(options7);

                    // 积分统计 表3
                    var options8 = {
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: ['比例'],
                            align: 'left',
                            formatter: function(name) {
                                let totalPercent = ['比例'];
                                let percent_sum = 0;
                                percent.forEach(val => {
                                    percent_sum += val
                                })
                                if(name == totalPercent[0]) {
                                    return percent_sum + " %" + "\n" + "本" + str + "总" + name;
                                }
                            }
                        },
                        grid: {
                            x: 10,
                            width: 300,
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: datasX,
                                axisTick: {
                                    alignWithLabel: true,
                                }
                            }
                        ],
                        yAxis: {
                            show: false,
                            axisLine: {
                                show: false,
                            }
                        },
                        series: [
                            {
                                name: '比例',
                                type: 'bar',
                                barWidth: '60%',   
                                data: percent
                            }
                        ]
                    };
                    myChart8.setOption(options8);
                    
                }else{
                    layui.layer.msg(res);
                }
            }
        });
    }
    {if condition="$prize_buckle_data.is_prize_buckle_auth == 0"}
        $("#tab2").show().siblings().hide()
        $("#dates").hide()
    {/if}
    // 切换 tab栏
    var date;
    $("#tabs").on("click", "li", function() {
        var index = $(this).index()
        var url = $(this).children().attr('data-url');
        // console.log(url);
        if(index == 0) {
            $("#tab1").show().siblings().hide()
            $("#dates").hide()
        }else if(index == 1) {
            $("#tab2").show().siblings().hide()
            $("#dates").hide()
        }else if(index == 2) {
            $('#tabs').children('li').attr('class','');
            $(this).attr('class','active');
            $("#tab3").show().siblings().hide()
            $("#dates").hide()
        }else if(index == 3) {
            $("#tab4").show().siblings().hide()
            $("#dates").show().children().eq(0).addClass("xz").siblings().removeClass("xz")
            date = $("#dates").children("#D").attr("date")
            // 初次渲染
            render(date)
        }
        $('#tabsIcon').attr('href',url);
    })

    // 切换日月周
    $("#tabs li").on("click", "span", function() {
        $(this).addClass("xz").siblings().removeClass("xz")
        date = $(this).attr("date")
        render(date);
    })

    // 奖扣任务
    var myChart = echarts.init(document.getElementById('chart'));
    var myChart2 = echarts.init(document.getElementById('chart2'));
    var myChart3 = echarts.init(document.getElementById('chart3'));
    var myChart4 = echarts.init(document.getElementById('chart4'));
    var myChart5 = echarts.init(document.getElementById('chart5'));
    // 奖扣统计
    var myChart6 = echarts.init(document.getElementById('chart6'));
    var myChart7 = echarts.init(document.getElementById('chart7'));
    var myChart8 = echarts.init(document.getElementById('chart8'));
                       
     //日常积分
    var dailyIntegral = {$userIntegral.0.sum|default=0}; //日常积分
    var fixedIntegral = {$userIntegral.1.sum|default=0}; //固定积分
    var otherIntegral = {$userIntegral.3.sum|default=0}; //其他积分
    var zjf = dailyIntegral + fixedIntegral + otherIntegral; //总积分
    let  Integralarr = [];
    Integralarr.push(dailyIntegral);
    Integralarr.push(fixedIntegral);
    Integralarr.push(otherIntegral);
    
    // { a } <br />{ b }: ${ otherIntegral } ({ d } %)
    // 首页
    var options1 = {
            color: ['#EEB422', '#3c8fe8', "#93cd30"],
            tooltip: {
                trigger: 'item',
                formatter: function (params) { return `${params.seriesName}</br>${params.data.name}${Integralarr[params.dataIndex]}分&ensp;${params.data.value}%` }            
            },
            title: {
                show: true,
                text: '积分:' + dailyIntegral+'分',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: '15',
                    color: '#666',
                    fontWeight: 'normal'
                }
            },
            legend: {
                orient: 'vertical',
                right: 0,
                top: 0,
                bottom: 0,
                data: ['日常奖扣', '固定积分', '其他积分']
            },
            series: [
                {
                    name: '我的积分',
                    type: 'pie',
                    radius: ['60%', '85%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        { value: {$userIntegral.0.percent|default=0}, name: '日常奖扣' },
                        { value: {$userIntegral.1.percent|default=0}, name: '固定积分' },
                        { value: {$userIntegral.3.percent|default=0}, name: '其他积分' },
                    ]
                }
            ]
    };
    myChart.setOption(options1);
    // 奖扣任务 2-5 
    var options2 = {
        color: ['#93cd30', '#ccc'],
        tooltip: {
            trigger: 'item',
            formatter: "{b}{d}%"
        },
        title: {
            show: true,
            text: {$prize_buckle_data.prize_com_rate}+"%",
            x: 'center',
            y: 'center',
            textStyle: {
                fontSize: '13',
                color: '#666',
                fontWeight: 'normal'
            }
        },
        series: [
            {
                name: '奖分',
                type: 'pie',
                radius: ['60%', '85%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false
                    }

                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [ 
                    { value: {$prize_buckle_data.prize_com_rate},
                        name: '奖分完成比例',
                        itemStyle: {
                            normal: {
                                color: '#3AA1FF'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#3AA1FF'
                            }
                        }
                    },
                    { value: 100-{$prize_buckle_data.prize_com_rate},
                        name: '奖分未完成比例',
                        itemStyle: {
                            normal: {
                                color: '#F6F6F6'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#F6F6F6'
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        }
                    }
                ]
            }
        ]
    };
    myChart2.setOption(options2);

    var options3 = {
        color: ['#93cd30', '#ccc'],
        tooltip: {
            trigger: 'item',
            formatter: "{b}{d}%"
        },
        title: {
            show: true,
            text: {$prize_buckle_data.buckle_com_rate} + "%",
            x: 'center',
            y: 'center',
            textStyle: {
                fontSize: '13',
                color: '#666',
                fontWeight: 'normal'
            }
        },

        series: [
            {
                name: '扣分',
                type: 'pie',
                radius: ['60%', '85%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    }

                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    { value: {$prize_buckle_data.buckle_com_rate},
                    name: '扣分完成比例',
                        itemStyle: {
                            normal: {
                                color: '#3AA1FF'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#3AA1FF'
                            }
                        }
                    },
                    { value: 100-{$prize_buckle_data.buckle_com_rate},
                    name: '扣分未完成比例',
                        itemStyle: {
                            normal: {
                                color: '#F6F6F6'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#F6F6F6'
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        }
                    }


                ]
            }
        ]
    };
    myChart3.setOption(options3);

    var options4 = {
        color: ['#93cd30', '#ccc'],
        tooltip: {
            trigger: 'item',
            formatter: "{b}{d}%"
        },
        title: {
            show: true,
            text:  {$prize_buckle_data.people_com_rate} + "%",
            x: 'center',
            y: 'center',
            textStyle: {
                fontSize: '13',
                color: '#666',
                fontWeight: 'normal'
            }
        },

        series: [
            {
                name: '人次',
                type: 'pie',
                radius: ['60%', '85%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    }

                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    { value: {$prize_buckle_data.people_com_rate},
                    name: '人次完成比例',
                        itemStyle: {
                        normal: {
                            color: '#3AA1FF'
                        },
                        emphasis:{  // 取消鼠标hover时高亮
                            color:'#3AA1FF'
                        }
                    }
                    },
                    { value: 100-{$prize_buckle_data.people_com_rate},
                    name: '人次未完成比例',
                        itemStyle: {
                            normal: {
                                color: '#F6F6F6'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#F6F6F6'
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        }
                    }


                    ]
            }
        ]
    };
    myChart4.setOption(options4);

    var options5 = {
        color: ['#93cd30', '#ccc'],
        tooltip: {
            trigger: 'item',
            formatter: "{b}{d}%"
        },
        title: {
            show: true,
            text: '本月'+ {$prize_buckle_data.rate_com_rate} + "%",
            x: 'center',
            y: 'center',
            textStyle: {
                fontSize: '13',
                color: '#666',
                fontWeight: 'normal'
            }
        },

        series: [
            {
                name: '比例',
                type: 'pie',
                radius: ['60%', '85%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [

                    { value: {$prize_buckle_data.rate_com_rate},
                    name: '完成比例',
                        itemStyle: {
                        normal: {
                            color: '#3AA1FF'
                        },
                        emphasis:{  // 取消鼠标hover时高亮
                            color:'#3AA1FF'
                        }
                    }
                    },
                    { value: 100-{$prize_buckle_data.rate_com_rate},
                        name: '未完成比例',
                        itemStyle: {
                            normal: {
                                color: '#F6F6F6'
                            },
                            emphasis:{  // 取消鼠标hover时高亮
                                color:'#F6F6F6'
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        }
                    }


                    ]

            }
        ]
    };
    myChart5.setOption(options5);                            
</script>

<script type="text/javascript">
    // var time = new Date();
    // var h = time.getHours(); //时
    // var m = time.getMinutes(); //分
    // var s = time.getSeconds(); //秒
    // h = h > 12 ? (h - 12) * 5 + parseInt(m / 12) : h * 5 + parseInt(m / 12); //时针 初始位置
    // //=====================================
    // var x = 200, y = 200, sAngle = 0; //x y 原点 秒针角度变量
    // function draw() {
    //     var c = document.getElementById("clock");
    //     var ctx = c.getContext("2d"); //获取绘图对象
    //     ctx.clearRect(0, 0, c.width, c.height); //清除上次绘制的图形
    //     s++;//秒针
    //     ctx.fillStyle = '#fff' //填充白色背景色 
    //     ctx.fillRect(0, 0, c.width, c.height);   //设置画布区域
    //     //填充圆点，在画布中心（200,200）绘制一个半径10px的圆形
    //     ctx.beginPath();
    //     ctx.arc(x, y, 10, 0, Math.PI * 2, true);
    //     ctx.fill();
    //     ctx.closePath();
    //     //填充版权文字
    //     ctx.fillStyle = "#ccc";
    //     ctx.font = "12pt Arial";
    //     ctx.fillText("", 150, 250);
    //     //调用日期并填充到画布中
    //     ctx.fillStyle = "#666";
    //     ctx.font = "14pt Verdana";
    //     ctx.fillText(time.getMonth() + 1 + "-" + time.getDate(), 183, 170);
    //     ctx.save(); //保存当前绘图状态
    //     // 时间刻度
    //     for (var i = 0; i < 12; i++) {
    //         var angle = (Math.PI * 2) / 12;
    //         ctx.beginPath();//开始绘制
    //         ctx.font = "12px Arial";
    //         if (i == 0 || i == 3 || i == 6 || i == 9) {
    //             ctx.fillStyle = "red";
    //             radius = 4;
    //         } else {
    //             ctx.fillStyle = "#1E90FF";
    //             radius = 3;
    //         }
    //         ctx.arc(x, y - 100, radius, 0, Math.PI * 2, true); //画圆
    //         ctx.fill(); //填充路径
    //         trans(ctx, x, y, angle);  //刻度分布              
    //     }
    //     ctx.restore(); //恢复上次保存的绘图状态
    //     sAngle = (Math.PI * 2) / 60 * s; //秒度
    //     //时针转动
    //     ctx.save();
    //     ctx.strokeStyle = "red";
    //     ctx.lineWidth = 3;
    //     trans(ctx, x, y, (Math.PI * 2) / 60 * h);
    //     pointer(ctx, x, y, y - 40);
    //     ctx.restore();
    //     //分针转动
    //     ctx.save();
    //     ctx.strokeStyle = "#1E90FF";
    //     ctx.lineWidth = 2;
    //     trans(ctx, x, y, (Math.PI * 2) / 60 * m);
    //     pointer(ctx, x, y, y - 68);
    //     ctx.restore();
    //     //秒针转动
    //     ctx.save();
    //     ctx.strokeStyle = "#000";
    //     trans(ctx, x, y, sAngle);
    //     pointer(ctx, x, y, y - 80);
    //     ctx.restore();
    //     //数据整理
    //     if (s % 60 == 0) {
    //         sAngle = 0, s = 0, m++;
    //         if (m % 12 == 0) { //每十二分 时针旋转一次
    //             if (m != 0)
    //                 h++;
    //             if (m % 60 == 0)
    //                 m = 0;
    //         }
    //         if (h % 60 == 0)
    //             h = 0;
    //     }
    // }
    // //绘制指针
    // function pointer(ctx, x, y, z) {
    //     ctx.beginPath();
    //     ctx.moveTo(x, y);
    //     ctx.lineTo(x, z);
    //     ctx.stroke();
    //     ctx.fill();
    // }
    // //据坐标旋转
    // function trans(ctx, x, y, angle) {
    //     ctx.transform(Math.cos(angle), Math.sin(angle),
    //         -Math.sin(angle), Math.cos(angle),
    //         x * (1 - Math.cos(angle)) + x * Math.sin(angle),
    //         y * (1 - Math.cos(angle)) - y * Math.sin(angle))
    // }
    // setInterval("draw()", 1000);



    //     function move() {
    //         // 获取元素和初始值
    //         var oBox = document.getElementById('clock'), disX = 0, disY = 0;
    //         // 获取浏览器可见区域宽高，div宽高
    //         var browserWidth = document.documentElement.clientWidth,
    //             browserHeight = document.documentElement.clientHeight,
    //             boxWidth = document.getElementById('clock').offsetHeight,
    //             boxHeight = document.getElementById('clock').offsetWidth;
    //         // 容器鼠标按下事件
    //         oBox.onmousedown = function (e) {
    //             var e = e || window.event;
    //             // 鼠标相对于div左侧位置
    //             disX = e.clientX - this.offsetLeft;
    //             disY = e.clientY - this.offsetTop;
    //             document.onmousemove = function (e) {
    //                 var e = e || window.event;
    //                 oBox.style.left = (e.clientX - disX) + 'px';
    //                 if ((e.clientX - disX) <= 0) {
    //                     oBox.style.left = 0;
    //                 } else if ((boxWidth - disX + e.clientX) >= browserWidth) {
    //                     oBox.style.left = browserWidth - boxWidth + "px";
    //                 }
    //                 oBox.style.top = (e.clientY - disY) + 'px';
    //                 if ((e.clientY - disY) <= 0) {
    //                     oBox.style.top = 0;
    //                 } else if ((boxHeight - disY + e.clientY) >= browserHeight) {
    //                     oBox.style.top = browserHeight - boxHeight + "px";
    //                 }
    //             };

    //             document.onmouseup = function () {
    //                 document.onmousemove = null;
    //                 document.onmouseup = null;
    //             };
    //             return false;
    //         };
    //     }

    // move();

</script>

{/block}